import { AbstractNavigator, DefaultSliderWrapper } from "@/components";
import { useApplicationInfo } from "@/store/applicationDataContext";
import { usePageDimensions } from "@/hooks/usePageDimensions";
import { View } from "@tarojs/components";
import style from "./index.module.scss";
import { getDiscoverTabId } from "@/utils/navigation";
import { DiscoverTabs } from "@/pages/discover/discoverData";
import {
  ApiShopItemsMapping,
  ShopDataShape,
  ShopItemTypes,
} from "@/data/shop/shopTypes";
import { PagesNavigation } from "@/data/pages/pagesTypes";
import { ActionNames, sendAction } from "@/utils/tracking";

type SectionDataTypes =
  | {
      id: ShopItemTypes;
      trackingAction: ActionNames;
      title: string;
      tabLink?: never;
      openType: "navigate";
      url: PagesNavigation;
      shopItemType?: ApiShopItemsMapping;
    }
  | {
      id: ShopItemTypes;
      trackingAction: ActionNames;
      title: string;
      tabLink?: DiscoverTabs;
      openType: "switchTab";
      url: PagesNavigation;
      shopItemType?: ApiShopItemsMapping;
    };

const SECTIONS: Array<SectionDataTypes> = [
  {
    id: "giftcertificate",
    trackingAction: ActionNames.ShopListGiftCardReadMoreClick,
    title: "礼品卡",
    openType: "navigate",
    url: `pages/shop-item-separate-list/index?id=${ApiShopItemsMapping.Giftcertificate}`,
    shopItemType: ApiShopItemsMapping.Giftcertificate,
  },
  {
    id: "souvenir",
    trackingAction: ActionNames.ShopListSouvenirReadMoreClick,
    title: "纪念品",
    openType: "navigate",
    url: `pages/shop-item-separate-list/index?id=${ApiShopItemsMapping.Souvenir}`,
    shopItemType: ApiShopItemsMapping.Souvenir,
  },
  {
    id: "publication",
    trackingAction: ActionNames.ShopListPublicationReadMoreClick,
    title: "出版物",
    tabLink: "publication",
    openType: "switchTab",
    url: "pages/discover/index",
    shopItemType: ApiShopItemsMapping.Publication,
  },
];

interface ShopListingProps {
  shopCards: ShopDataShape;
}

export default function C23ShopListing({ shopCards }: ShopListingProps) {
  const { dispatch } = useApplicationInfo();

  const { heightExclNavbar } = usePageDimensions();

  return (
    <View
      className={style["shop-listing-wrapper"]}
      style={{ minHeight: heightExclNavbar }}
    >
      {SECTIONS.map((sectionData) => {
        const fromApi = shopCards[sectionData.id];

        return (
          // Surrounding View only to not get key-issues
          <View key={sectionData.id}>
            {!!fromApi.length && (
              <View className={style.section}>
                <View className={style["title-section"]}>
                  <View className={style["section-title"]}>
                    {sectionData.title}
                  </View>
                  <AbstractNavigator
                    className={style.link}
                    openType={sectionData.openType}
                    url={sectionData.url}
                    onClick={() => {
                      sendAction(sectionData.trackingAction);
                      // Only for discover tab switch, else => noOp
                      if (sectionData.tabLink) {
                        dispatch({
                          type: "DISCOVER_TAB",
                          data: {
                            tab: getDiscoverTabId(sectionData.tabLink),
                          },
                        });
                      }
                    }}
                  >
                    <View className={style["link-text"]}>查看更多</View>
                  </AbstractNavigator>
                </View>

                <DefaultSliderWrapper
                  cardData={fromApi.map((itemData) => ({
                    cardId: itemData.id,
                    imagePath: itemData.cover,
                    title: itemData.name,
                    cost: +itemData.price,
                    type:
                      sectionData.id === "publication"
                        ? "product-card"
                        : "product-card-short",
                    redirect: "shopitem",
                    shopItemType: sectionData.shopItemType,
                  }))}
                  type="card-banner-shop"
                  hideScroller
                  shopItemTypeName={sectionData.title}
                ></DefaultSliderWrapper>
              </View>
            )}
          </View>
        );
      })}
    </View>
  );
}
